<template>
  <div>
    <BaseSearch :config="searchConfig" v-bind="form" ref="search"></BaseSearch>
    <BaseTable :columns="columns" v-bind="table">
      <template slot-scope="scope" slot="amount">
        <span>{{ scope.row.amount | separatorMoney }}</span>
      </template>
      <template slot-scope="scope" slot="quota">
        <span>{{ scope.row.quota | separatorMoney }}</span>
      </template>
      <template slot-scope="scope" slot="leftAmount">
        <span>{{ scope.row.leftAmount | separatorMoney }}</span>
      </template>
    </BaseTable>
    <DisbursePop ref="DisbursePop" @closePop="addEditSuccess"></DisbursePop>
  </div>
</template>

<script>
import BaseSearch from '@/components/BaseSearch/index.vue'
import BaseTable from '@/components/BaseTable/index.vue'
import { FormTableMixin } from '@/mixins/form-table'
import http from '@/utils/request'
import { DISBURSE_STATUS } from '@/constants/auditModel.js'
import DisbursePop from '../../components/DisbursePop.vue'

const service = async params => {
  const { records, total } = await http.get('/drawdowns', {
    params: { ...params, drawdownType: 2 },
  })

  return {
    data: records,
    total: total,
  }
}

export default {
  name: 'DisburseAgain',
  components: { BaseSearch, BaseTable, DisbursePop },
  mixins: [FormTableMixin(service)],
  data() {
    const isCanAudit = this.$checkAccess('MENU_DISBURSE_AGAIN_TRIAL_APPROVAL')
    const isCanDetail = this.$checkAccess('MENU_DISBURSE_AGAIN_TRIAL_DETAIL')
    return {
      searchConfig: [{ component: 'input', prop: 'searchStr', label: '搜索', placeholder: '企业名称/统一信用代码' }],
      columns: [
        { label: '企业名称', prop: 'companyName' },
        { label: '统一信用代码', prop: 'uscCode' },
        { label: '申请支用(元)', prop: 'amount' },
        { label: '授信金额(元)', prop: 'creditAmount' },
        { label: '可贷余额', prop: 'applyQuota' },
        { label: '申请时间', prop: 'createDate' },
        {
          label: '状态',
          prop: 'status',
          render: (value, row) => {
            return <span>{DISBURSE_STATUS[row.status]}</span>
          },
        },
        {
          label: '操作',
          render: (value, row) => {
            return (
              <div>
                {isCanAudit && row.status === '1' ? (
                  <el-button
                    type="text"
                    onClick={() => {
                      this.audit(row)
                    }}>
                    审核
                  </el-button>
                ) : (
                  ''
                )}
                {isCanDetail && (
                  <el-button
                    type="text"
                    onClick={() => {
                      this.jumpToDetail(row)
                    }}>
                    详情
                  </el-button>
                )}
              </div>
            )
          },
        },
      ],
    }
  },
  methods: {
    audit(item) {
      this.$refs.DisbursePop.show({
        drawdownId: item.id,
        title: '审批',
        auditType: 2,
        ...item,
        maxMoney: item.amount,
      })
    },
    jumpToDetail(item) {
      this.$router.push({
        name: 'disburseDetail',
        query: {
          drawdownId: item.id,
        },
      })
    },
    addEditSuccess(isClose) {
      if (isClose) {
        this.$refs.search.$refs.searchForm.resetFields()
        this.form.onSubmit()
      }
    },
  },
}
</script>

<style lang="scss" scoped></style>
